<template>
  <div class="app-container">
    <el-card class="order-management-card">
      <div slot="header" class="clearfix">
        <span>📦 药品订单管理</span>
        <div class="header-buttons">
          <el-button type="primary" size="mini" @click="handleImport">导入运单</el-button>
          <el-button type="success" size="mini" @click="handleExport">导出</el-button>
        </div>
      </div>
      
      <!-- 筛选区域 -->
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="filter-form">
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="下单人">
          <el-input
            v-model="queryParams.orderer"
            placeholder="请输入下单人"
            clearable
            size="small"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 表格 -->
      <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="下单时间" align="center" prop="orderTime" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.orderTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="药品名称" align="center" prop="medicineName" :show-overflow-tooltip="true" />
        <el-table-column label="数量" align="center" prop="quantity" width="100" />
        <el-table-column label="下单人" align="center" prop="orderer" :show-overflow-tooltip="true" />
        <el-table-column label="客户名称" align="center" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="联系方式" align="center" prop="contact" width="120" />
        <el-table-column label="地址" align="center" prop="address" :show-overflow-tooltip="true" />
        <el-table-column label="快递信息" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleViewShipping(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <pagination
        v-show="pagination.total>0"
        :total="pagination.total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        @pagination="getList"
      />
    </el-card>
    
    <!-- 快递详情弹窗 -->
    <el-dialog title="快递信息详情" :visible.sync="shippingDialogVisible" width="500px">
      <el-form ref="shippingForm" :model="currentShipping" label-width="100px">
        <el-form-item label="快递公司：">
          <span>{{ currentShipping.expressCompany }}</span>
        </el-form-item>
        <el-form-item label="运单号：">
          <span>{{ currentShipping.trackingNumber }}</span>
        </el-form-item>
        <el-form-item label="当前状态：">
          <span>{{ currentShipping.status }}</span>
        </el-form-item>
        <el-form-item label="更新时间：">
          <span>{{ currentShipping.updateTime }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shippingDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    
    <!-- 导入运单对话框 -->
    <el-dialog title="导入运单信息" :visible.sync="importDialogVisible" width="500px">
      <el-form ref="importForm" :model="importForm" label-width="100px">
        <el-form-item label="运单文件：">
          <el-upload
            class="upload-demo"
            drag
            action=""
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="importDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitImport">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 使用假数据
import { getMockOrderList, getMockShippingInfo, mockImportWaybill, mockExportOrders } from "./mock";
import Pagination from "@/components/Pagination";

export default {
  name: "OrderInfo",
  components: {
    Pagination
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      multipleSelection: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        orderer: undefined
      },
      // 分页参数
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 订单列表
      orderList: [],
      // 快递详情对话框
      shippingDialogVisible: false,
      // 当前快递信息
      currentShipping: {
        expressCompany: "",
        trackingNumber: "",
        status: "",
        updateTime: ""
      },
      // 导入对话框
      importDialogVisible: false,
      // 导入表单
      importForm: {
        file: undefined
      },
      // 文件列表
      fileList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      const params = {
        ...this.queryParams,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      };
      if (this.dateRange && this.dateRange.length === 2) {
        params.beginTime = this.dateRange[0];
        params.endTime = this.dateRange[1];
      }
      // 使用假数据
      const response = getMockOrderList(params, this.pagination.pageNum, this.pagination.pageSize);
      this.orderList = response.rows;
      this.pagination.total = response.total;
      this.loading = false;
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.pagination.pageNum = 1;
      this.getList();
    },
    
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    
    /** 导入运单 */
    handleImport() {
      this.importDialogVisible = true;
    },
    
    /** 导出 */
    handleExport() {
      const params = {
        ...this.queryParams
      };
      if (this.dateRange && this.dateRange.length === 2) {
        params.beginTime = this.dateRange[0];
        params.endTime = this.dateRange[1];
      }
      // 使用假数据
      const data = mockExportOrders(params);
      this.$message.success(`导出成功，共导出${data.length}条订单记录`);
    },
    
    /** 查看快递详情 */
    handleViewShipping(row) {
      // 使用假数据
      const shippingInfo = getMockShippingInfo(row.id);
      if (shippingInfo) {
        this.currentShipping = shippingInfo;
        this.shippingDialogVisible = true;
      }
    },
    
    /** 选中项变化 */
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    
    /** 文件上传 */
    handleFileChange(file, fileList) {
      this.importForm.file = file.raw;
      this.fileList = fileList.slice(-1); // 只保留最后一个文件
    },
    
    /** 提交导入 */
    submitImport() {
      if (!this.importForm.file) {
        this.$message.warning("请先选择文件");
        return;
      }
      
      // 使用假数据
      const result = mockImportWaybill(this.importForm.file);
      if (result) {
        this.$message.success("运单导入成功");
        this.importDialogVisible = false;
        this.getList(); // 重新加载列表
      } else {
        this.$message.error("运单导入失败");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.order-management-card {
  .header-buttons {
    float: right;
  }
  
  .filter-form {
    margin-bottom: 20px;
  }
}
</style>